import React, { Fragment } from 'react';
import { observer } from 'mobx-react';
import { WeaRightMenu ,WeaLocaleProvider} from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;
import window from "../../util";

export interface BarCodeViewerProp {
    CodeStore: {
        html: any[],
        getCode: Function,
        rows: number,
        cols: number,
        levelspacing: number,
        verticalspacing: number,
        loading: boolean,
        query: any,
        params: any;
        clearState:Function;
        CodeLeft:string;
        CodeRight:string;
        postion :string;
        windowTitle:string;
    };
    location?: any;
    params?: any;
}

@observer
export default class BarCodeViewer extends React.Component<BarCodeViewerProp, any> {
    componentWillUnmount(){
        const { CodeStore, } = this.props;
        CodeStore.clearState();
    }
    getRightMenus = () => {
        let btns:any = [];
        btns.push({
            icon: <i className='icon-coms-Print ' />,
            content: getLabel( 257 , "打印"),
            key: '1',
            onClick:(key)=>setTimeout(()=>{
                window.print()
            },100)
        })
        return btns
    }
    render() {
        const container =  document.querySelector("body")||"";
        if(container){
            container.className ="printBody";   //打印时需要body具有"printBody"属性
        }
        const { CodeStore } = this.props;
        if(CodeStore.windowTitle != ''){
            document.title = CodeStore.windowTitle;
        }
        const gridStyle = { width: `${100 / (CodeStore.cols == 0 ? 1 : CodeStore.cols)} % ` }
        let htmls = [] as { html: any[] }[];
        CodeStore.html.map((h, index) => {
            let mindex = index % (CodeStore.cols == 0 ? 1 : CodeStore.cols);
            let tindex = (index - mindex) / (CodeStore.cols == 0 ? 1 : CodeStore.cols);
            if (mindex == 0) {
                htmls.push({ html: [] });
            }
            htmls[tindex].html.push(h);
        });
        return (
            <WeaRightMenu
                datas={this.getRightMenus()}
                collectParams={{
                    "favname": "",
                    "link": '/' + window.location.toString().split('/').slice(3).join('/'),
                    "favouritetype": 5,
                    "importantlevel": 1
                }}
            >
                <div
                    className="coms-mode-code-view-body"
                >
                    {
                        htmls.map((html,index) => {
                            return (
                                <Fragment>
                                    <div
                                    className={index%(CodeStore.rows == 0 ? 1 : CodeStore.rows)==((CodeStore.rows == 0 ? 1 : CodeStore.rows)- 1)?
                                        "coms-mode-code-view  coms-mode-code-view-with-page-break":"coms-mode-code-view"}
                                        style={{  textAlign: CodeStore.postion=="left"?"left":CodeStore.postion=="right"?"right":"center", marginLeft:CodeStore.CodeRight,marginRight:CodeStore.CodeLeft}}
                                >
                                    {
                                        html.html.map(h => {
                                            return (
                                                <div style={gridStyle} className="coms-mode-code-view-container">
                                                    <div
                                                        style={{ marginRight: `${CodeStore.levelspacing}cm`, marginBottom: `${CodeStore.verticalspacing}cm` }}
                                                        dangerouslySetInnerHTML={{ __html: h }}></div>
                                                </div>
                                            )
                                        })
                                    }
                                </div>
                                </Fragment>
                            )
                        })
                    }
                </div>
            </WeaRightMenu>
        )
    }
}
